<template>
  <div>
    <a-modal :visible="visible" @before-open="open" :on-before-ok="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="500px" :mask-closable="false">
      <template #title> 批量添加货位 </template>
      <div>
        <a-form auto-label-width ref="formRef" size="medium" :model="form">
          <a-space direction="vertical" :size="24">
            <a-row>
              <a-col :span="24">
                <a-form-item field="warehouseCode" label="选择自营仓" :rules="rules.warehouseCode">
                  <a-select @change="changeWarehouse" placeholder="请选择" v-model="form.warehouseCode" allow-clear allow-search style="width: 200px">
                    <a-option v-for="item of countriesOptions" :label="item.warehouseName" :value="item.warehouseCode"></a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item field="name" label="仓库属性">
                  <span>{{ warehouseAttribute }}</span>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item field="name" label="存货类型">
                  <span>{{ stockType }}</span>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item field="shelvesCodes" label="货架编号" :rules="rules.shelvesCodes">
                  <a-textarea v-model="form.shelvesCodes" auto-size placeholder="一行填写一个编号" style="width: 200px" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item field="rows" label="货位行数" :rules="rules.rows">
                  <a-input-number v-model="form.rows" placeholder="填写单个货位行数" style="width: 200px" hide-button allow-clear />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item field="lines" label="货位列数" :rules="rules.lines">
                  <a-input-number v-model="form.lines" placeholder="填写单个货位列数" style="width: 200px" hide-button allow-clear />
                </a-form-item>
              </a-col>
            </a-row>
          </a-space>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { countriesOptions } from '@/utils/countries'
  import { warehouiseAllList, createLocationBatch } from '@/api/warehouse'
  import { Message } from '@arco-design/web-vue'
  import _ from 'lodash-es'
  export default defineComponent({
    props: ['detail'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const formRef = ref()
      const data = reactive({
        form: {},
        rules: {
          warehouseCode: [{ required: true, message: '请选择自营仓' }],
          shelvesCodes: [{ required: true, message: '请输入货架编号' }],
          rows: [{ required: true, message: '请输入货位行数' }],
          lines: [{ required: true, message: '请输入货位列数' }],
        },
        countriesOptions: [],
        warehouseAttribute: '',
        stockType: '',
      })

      const open = () => {
        getWarehouseList()
      }
      const handleOk = (done: any) => {
        formRef.value.validate(async (valid: any) => {
          if (!valid) {
            let params: any = _.cloneDeep(data.form)
            console.log(params)
            params.shelvesCodes = params.shelvesCodes.split('\n')
            try {
              const res: any = await createLocationBatch(params)
              if (res.code == 'SUCCESS') {
                data.form = {}
                data.stockType = ''
                data.warehouseAttribute = ''
                Message.success('添加成功')
                visible.value = false
                emit('save')
              }
              done(true)
            } catch (error) {
              done(true)
            }
          } else {
            done(true)
          }
        })
      }
      const handleCancel = () => {
        data.form = {}
        data.stockType = ''
        data.warehouseAttribute = ''
        visible.value = false
      }

      const changeWarehouse = (val: string) => {
        if (val) {
          let obj: any = data.countriesOptions.find((e: any) => e.warehouseCode == val)
          data.warehouseAttribute = obj.warehouseAttribute == 1 ? '国内仓' : '海外仓'
          data.stockType = obj.stockType
        } else {
          data.warehouseAttribute = ''
          data.stockType = ''
        }
      }

      const getWarehouseList = async () => {
        const res = await warehouiseAllList()
        data.countriesOptions = res.data
      }
      return {
        ...(toRefs(data) as any),
        visible,
        formRef,
        open,
        handleOk,
        handleCancel,
        changeWarehouse,
      }
    },
  })
</script>

<style lang="less" scoped></style>
